<template>
    <a-drawer
      title="应用"
      width="500"
      placement="left"
      :closable="false"
      @close="onClose"
      :visible="visible"
    >
      <div class="setting-drawer-index-content">
        <a-spin :spinning="confirmLoading">
          <a-row type="flex">
            <a-col span='8' v-for='item in list' :key='item.id' >
              <div style='display: flex;justify-content:center;flex-direction:column;width: 100%;align-items:center;cursor:pointer;' @click='handleApp(item)'>
                <a-avatar
                  shape="square"
                  size="large"
                >
                  {{item.alias}}
                </a-avatar>
                <div>{{item.name}}</div>
              </div>

            </a-col>
          </a-row>
        </a-spin>
      </div>
    </a-drawer>
</template>

<script>
import { axios } from '@/utils/request'
export default {
  name: 'AppDrawer',
  data() {
    return {
      visible: false,
      confirmLoading: false,
      list: []
    }
  },
  methods: {
    onClose(){
      this.visible = false
    },
    showDrawer(){
      this.visible = true
      this.getAppList()
    },
    handleApp(item){
      window.open(item.url);
    },
    getAppList(){
      let url = process.env.VUE_APP_SSO_SERVER + "/app/list"
      this.confirmLoading = true
      axios.get(url).then(res => {
        this.list = res.data
      }).catch(err => {
        this.$message.error(err)
      }).finally(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>